<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import { getAddlabel, getChangelabel, getDellabel, getLabel } from '@/api/interface/http1';

const text = ref('');
const text1
    = ref('');
const dialogFormVisible = ref(false);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});

const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
};
// 请求
const tableData = ref([]);
let params = reactive({
    pageSize: 10,
    pageNum: 1
});

function getLabellist() {
    getLabel(params).then(res => {
        console.log(res);
        tableData.value = res.rows;
        totalItems.value = res.total;
        // console.log();
    });
}

getLabellist();
const dialogVisible = ref(false);

//删除

const open = (row: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该文件，是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            let params = row.id;
            getDellabel(params).then(res => {
                console.log(res);
                getLabellist();
            });
            console.log(row);
            ElMessage({
                type: 'success',
                message: '已成功删除'
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            });
        });
};
let data = reactive({
    id: '',
    label: '',
    enable: ''
});
// 添加
const addLabel = () => {
    data.label = text.value;
    dialogFormVisible.value = false;
    getAddlabel(data).then(res => {
        if (res.code === 200) {
            console.log(res);
            tableData.value.push(data);
            getLabellist();
            ElMessage({
                type: 'success',
                message: '添加成功！'
            });
        }
    });
    text.value = '';
};

// 编辑

const change = (index: number, row: any) => {
    dialogVisible.value = true;
    text1.value = row.label;
    data.id = tableData.value[index].id;
};
const Savechange = () => {
    dialogVisible.value = false;
    data.label = text1.value;
    getChangelabel(data).then(res => {
        if (res.code === 200) {
            getLabellist();
            ElMessage({
                type: 'success',
                message: '编辑成功！'
            });
        }
    });
};
</script>

<template>
    <div class='box'>
        <div class='add'>
            <el-button type='primary' @click='dialogFormVisible = true'>
                <span>添加</span>
            </el-button>
            <el-dialog v-model='dialogFormVisible' title='添加' width='500'>
                <div style='margin-bottom: 110px'>
                    <label for='' style='margin-left: 50px'>标签名称</label>
                    <el-input
                        v-model='text'
                        style='width: 297px;margin-left: 10px;'
                        maxlength='20'
                        placeholder='请输入名称'
                        show-word-limit
                        type='text'
                    />
                </div>
                <template #footer>
                    <div class='dialog-footer'>
                        <el-button @click='dialogFormVisible = false'>取消</el-button>
                        <el-button type='primary' @click='addLabel'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class='section'>
            <el-table :data='paginatedData' border style='width: 100%;'>
                <el-table-column prop='label' label='名称' min-width='200'/>
                <el-table-column prop='updateTime' label='更新时间' width='500' />
                <el-table-column fixed='right' label='操作' width='500'>
                    <template #default='scope'>
                        <el-button plain @click='change(scope.$index,scope.row)'
                                   style='background-color: transparent;border: none;color: #409EFF;width: 25px'>
                            <span style='font-size: 12px'>编辑</span>
                        </el-button>
                        <el-button plain @click='open(scope.row)'
                                   style='background-color: transparent;border: none;color: #409EFF;width: 25px'><span
                            style='font-size: 12px'>删除</span>
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model='dialogVisible' title='编辑' width='500'>
                <div style='margin-bottom: 110px'>
                    <label for='' style='margin-left: 50px'>标签名称</label>
                    <el-input
                        v-model='text1'
                        style='width: 297px;margin-left: 10px;'
                        maxlength='20'
                        placeholder='请输入名称'
                        show-word-limit
                        type='text'
                    />
                </div>
                <template #footer>
                    <div class='dialog-footer'>
                        <el-button @click='dialogVisible = false'>取消</el-button>
                        <el-button type='primary' @click='Savechange'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class='footer'>
            <el-pagination small background @sizeChange='handleSizeChange' @currentChange='handleCurrentChange'
                           :current-page='currentPage' :page-sizes='[10, 20, 30, 40]' :page-size='pageSize'
                           :total='totalItems'>
            </el-pagination>
        </div>
    </div>
</template>

<style scoped lang='less'>
.box {
    margin-top: 20px;
    //width: 1168px;
    //height: 720px;

    .add {
        margin-left: 40px;
        margin-top: 40px;

        button {
            width: 70px;
            height: 36px;
        }

        :deep(.el-dialog__header) {
            text-align: left;
            width: 500px;
            background-color: rgb(24, 146, 255);

            .el-dialog__title {
                color: white;
            }

            svg {
                color: white;
            }
        }
    }

    .section {
        padding: 0px 20px;
        margin-top: 40px;
        margin-bottom: 50px;

        :deep(.el-table__row) {
            height: 52px;

            td {
                text-align: center;
            }
        }

        :deep(.cell) {
            height: 27px;
            line-height: 27px;
            text-align: center;
        }

        :deep(.el-table_1_column_7 ) {
            color: #00AEF3;
        }

        :deep(.el-dialog__header) {
            text-align: left;
            width: 500px;
            background-color: rgb(24, 146, 255);

            .el-dialog__title {
                color: white;
            }

            svg {
                color: white;
            }
        }

        .contentTree {
            margin: auto;
            margin-top: 30px;
            width: 700px;
            background-color: #eeeeee;
            text-align: left;
        }
    }
.dialog-footer {
    text-align: center;
}
    .footer {
        float: right;
        margin-bottom: 50px;
        margin-right: 50px;
    }
}
</style>
